<template>
  <div id="app">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom:20px">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>基础数据</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 老师信息面板 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 新增按钮 -->
        <span @click="handleAdd" style="margin:0px 30px;color:#409EFF;cursor:pointer">
          <i class="el-icon-circle-plus-outline" style="margin-right:5px"></i>新增用户
        </span>
        <template>
          <!-- 面板头部角色导航 -->
          <el-radio v-model="radio" label="-1" @change="selectTypeName">全部</el-radio>
          <el-radio-group v-model="radio">
            <el-radio
              :label="index"
              v-for="(item,index) in options"
              :key="index"
              @change="selectTypeName"
            >{{item.userTypeTypeName}}</el-radio>
          </el-radio-group>
        </template>
      </div>
      <!-- 老师基本信息 表格-->
      <div class="text item">
        <el-table style="width: 100%" :data="tableData">
          <el-table-column type="index" align="center" fixed></el-table-column>
          <el-table-column label="用户名称" width="180" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.userName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="手机号" width="180" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.userMobile }}</span>
            </template>
          </el-table-column>
          <el-table-column label="密码" width="180" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.userPassword }}</span>
            </template>
          </el-table-column>
          <el-table-column label="性别" width="100" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.userSex }}</span>
            </template>
          </el-table-column>
          <el-table-column label="角色名称" width="180" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.userTypeTypeName }}</span>
            </template>
          </el-table-column>
          <!-- 编辑、删除按钮 -->
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                class="del"
                :disabled="scope.row.disableDelete"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <!-- 修改、新增对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      center
      :modal-append-to-body="false"
      width="28%"
    >
      <!-- 修改、新增的信息 -->
      <el-form :model="formL" :rules="rules" status-icon ref="formL">
        <el-form-item label="用户名称" :label-width="formLabelWidth" prop="userName">
          <el-input v-model="formL.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth" prop="userMobile">
          <el-input v-model="formL.userMobile" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="userPassword">
          <el-input v-model="formL.userPassword" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="性别" prop="userSex">
          <el-radio-group v-model="formL.userSex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth" prop="userUserTypeId">
          <el-select v-model="formL.userUserTypeId" placeholder="请选择" @change="indexs">
            <el-option
              v-for="(item,index) in options"
              :key="index"
              :label="item.userTypeTypeName"
              :value="item.userTypeId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false">取 消</el-button>
        <!-- 修改按钮，点击修改信息 -->
        <el-button type="primary" v-if="show" @click="updatemsg('formL')">修 改</el-button>
        <!-- 添 加按钮，点击新增成员 -->
        <el-button type="primary" v-if="!show" @click="addTeacher('formL')">添 加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: "-1", //角色导航单选框的值
      changeRadio:"",
      tableData: [], //表格基本信息数据
      baseData: [], //存放初始数据
      dialogFormVisible: false, //对话框的显示
      formL: {
        userSex:"男",
        userName:"",
        userPassword:"",
        userMobile:"",
        userUid:"",
        userUserTypeId:""
      }, //修改、新增的表单数据
      formLabelWidth: "80px", //
      options: [], //角色名称导航的数据
      show: true, //控制修改、添加按钮的显示
      title: "", //对话框的标题
      rules: {
        //验证规则
        userName: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          { min: 2, max: 10, message: "长度 2 到 10 个字符", trigger: "blur" }
        ],
        userPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 18, message: "长度 6 到 18 个字符", trigger: "blur" }
        ],
        userMobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            required: true,
            pattern: /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/,
            message: "手机号无效",
            trigger: "blur"
          }
        ],
        userSex: [{ required: true, message: "请选择性别", trigger: "change" }],
        userUserTypeId: [
          { required: true, message: "请选择角色", trigger: "change" }
        ]
      }
    };
  },
  methods: {
    //从后台获取数据
    getdata() {
      //获取所有老师信息
      this.axios.get("/api/User/GetTeachers").then(response => {
        this.tableData = response.data;
        this.baseData = response.data;
        this.selectTypeName(this.radio);
      });
      //获取所有角色名称
      this.axios.get("/api/UserType/GetUserRoles").then(response => {
        this.options = response.data;
      });
    },
    //删除数据
    handleDelete(index, row) {
      let _this = this;
      _this
        .$confirm("确定要删除吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          _this.axios //删除接口
            .post("/api/User/RemoveTeacher?uid=" + row.userUid)
            .then(response => {
              if (response.data.code == 1) {
                _this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                _this.getdata();
              } else if (response.data.code == -1) {
                console.log("系统异常");
              } else {
                console.log("参数传递错误");
              }
            });
        })
        .catch(() => {
          console.log("获取数据失败");
        });
    },
    //编辑处理
    handleEdit(index, row) {
      this.formL = JSON.parse(JSON.stringify(row)); //把当前行的数据赋值给表单
      this.show = true; //显示修改按钮
      this.title = "修改用户信息"; //对话框标题
      this.changeRadio=this.radio
      this.dialogFormVisible = true; //显示对话框
    },
    // 修改数据
    updatemsg(formName) {
      let _this = this;
      _this.$refs[formName].validate(valid => {
        if (valid) {
          _this.axios //修改接口
            .post("/api/User/ModifyTeacher", {
              userUid: _this.formL.userUid, //要修改的用户标识符
              userName: _this.formL.userName, //修改名称
              userMobile: _this.formL.userMobile, //要修改的手机号，11位手机号
              userSex: _this.formL.userSex, //要修改的性别，男|女
              userUserTypeId: _this.formL.userUserTypeId, //角色
              userPassword: _this.formL.userPassword //密码
            })
            .then(response => {
              if (response.data.code == 0) {
                _this.$message({
                  type: "warning",
                  message: "您没有更改任何信息!"
                });
              } else if (response.data.code == 1) {
                _this.$message({
                  type: "success",
                  message: "修改成功!"
                });
                _this.radio=_this.changeRadio
                _this.getdata(); //重新渲染
                _this.dialogFormVisible = false; //关闭对话框
              } else {
                console.log("错误");
              }
            });
        } else {
          console.log("提交信息错误");
          return false;
        }
      });
    },
    // 添加处理
    handleAdd() {
      for (let i in this.formL) {//清除表单数据
        this.formL[i] = "";
      }
      this.formL.userSex = "男"; 
      if (this.radio>=0) {//表单角色选择框初值
        this.formL.userUserTypeId=this.options[this.radio].userTypeId;
      }else{
        this.formL.userUserTypeId=this.options[0].userTypeId;
      }
      this.changeRadio=this.radio
      this.show = false; //添加按钮显示
      this.title = "新增用户信息"; //对话框标题
      this.dialogFormVisible = true; //对话框显示
    },
    // 添加数据
    addTeacher(formName) {
      let _this = this;
      let getName = _this.tableData.map(item => item.userName);
      _this.$refs[formName].validate(valid => {
        if (valid) {
          if (getName.indexOf(_this.formL.userName) == -1) {
            //去重
            _this.axios //添加数据的接口
              .post("/api/User/AddTeacher", {
                userName: _this.formL.userName, //用户名，不能为空
                userMobile: _this.formL.userMobile, //手机号，长度11位
                userSex: _this.formL.userSex, //性别，男|女
                userPassword: _this.formL.userPassword, //密码，长度6~18
                userUserTypeId: _this.formL.userUserTypeId //用户角色编号
              })
              .then(response => {
                if (response.data.code == 1) {
                  _this.$message({
                    type: "success",
                    message: "添加成功!"
                  });
                  _this.radio=_this.changeRadio
                  _this.getdata(); //重新渲染
                  _this.dialogFormVisible = false; //关闭对话框
                } else if (response.data.code == 0) {
                  console.log("已有账号");
                } else {
                  console.log("系统错误");
                }
              });
          } else {
            _this.$message({
              type: "error",
              message: "已有账号!"
            });
          }
        } else {
          console.log("提交信息错误");
          return false;
        }
      });
    },
    
    //导航筛选角色名称
    selectTypeName(e) {
      // this.radioIndex=e
      if (e == -1) {
        //全部列表信息
        this.tableData = this.baseData;
      } else {
        this.tableData = this.baseData; //数据初始化,全部信息
        let arr = this.tableData.filter(item => {
          //筛选过滤对应角色id的数据
          return item.userUserTypeId == this.options[e].userTypeId;
        });
        this.tableData = arr; //重新渲染
      }
    },
    indexs(e) {
      this.changeRadio = this.options
        .map(item => {
          return item.userTypeId;
        })
        .indexOf(e);//获取当前角色对应的下标
    },
  },
  created() {
    this.getdata(); //获取所有信息
  }
};
</script>
<style scoped lang="less">
</style>
